
%icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: asset_url('icons.png');
  background-size: 4rem 6rem;
}

%svg-icon {
  display: inline-block;
  vertical-align: top;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  fill: currentColor;
}

%doc-icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: image-url('sprites/docs.png');
  background-size: 15rem 15rem;
}


@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  %icon { background-image: asset_url('icons@2x.png'); }
  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
}

html._theme-dark {
  %darkIconFix {
    filter: invert(100%) grayscale(100%);
    -webkit-filter: invert(100%) grayscale(100%);
  }
}


%icon-dir                   { background-position: 0 0; }
%icon-search                { background-position: -1rem 0; }
%icon-link                  { background-position: -2.25rem -.25rem; }
%icon-clear                 { background-position: -3rem 0; }
%icon-settings              { background-position: 0 -1rem; }
%icon-check                 { background-position: -1rem -1rem; }
%icon-menu                  { background-position: -2rem -1rem; @extend %darkIconFix !optional; }
%icon-home                  { background-position: -3rem -1rem; @extend %darkIconFix !optional; }
%icon-path                  { background-position: 0 -2rem; }
%icon-search-white          { background-position: -1rem -2rem; }
%icon-dir-white             { background-position: -2rem -2rem; }
%icon-link-white            { background-position: -3.25rem -2.25rem; }
%icon-settings-white        { background-position: 0 -3rem; }
%icon-check-white           { background-position: -1rem -3rem; }
%icon-light                 { background-position: -2rem -3rem; }
%icon-light-white           { background-position: -3rem -3rem; }
%icon-expand                { background-position: 0 -4rem; }
%icon-contract              { background-position: -1rem -4rem; }
%icon-expand-white          { background-position: -2rem -4rem; }
%icon-contract-white        { background-position: -3rem -4rem; }
%icon-clipboard             { background-position: 0 -5rem; }
%icon-clipboard-white       { background-position: -1rem -5rem; }
%icon-close-white           { background-position: -2rem -5rem; }
%icon-back                  { background-position: -3rem -5rem; @extend %darkIconFix !optional; }

._icon-angular:before { background-position: -0rem -0rem; }._icon-angularjs:before { background-position: -1rem -0rem; }._icon-ansible:before { background-position: -2rem -0rem; }._icon-apache_http_server:before { background-position: -3rem -0rem; @extend %darkIconFix !optional; }._icon-apache_pig:before { background-position: -4rem -0rem; }._icon-astro:before { background-position: -5rem -0rem; @extend %darkIconFix !optional; }._icon-async:before { background-position: -6rem -0rem; }._icon-axios:before { background-position: -7rem -0rem; }._icon-babel:before { background-position: -8rem -0rem; }._icon-backbone:before { background-position: -9rem -0rem; @extend %darkIconFix !optional; }._icon-bash:before { background-position: -10rem -0rem; }._icon-bazel:before { background-position: -11rem -0rem; }._icon-bluebird:before { background-position: -12rem -0rem; }._icon-bootstrap:before { background-position: -13rem -0rem; }._icon-bottle:before { background-position: -14rem -0rem; }._icon-bower:before { background-position: -0rem -1rem; }._icon-c:before { background-position: -1rem -1rem; }._icon-cpp:before { background-position: -2rem -1rem; }._icon-cakephp:before { background-position: -3rem -1rem; }._icon-chai:before { background-position: -4rem -1rem; }._icon-chef:before { background-position: -5rem -1rem; }._icon-clojure:before { background-position: -6rem -1rem; }._icon-cmake:before { background-position: -7rem -1rem; }._icon-codeception:before { background-position: -8rem -1rem; }._icon-codeceptjs:before { background-position: -9rem -1rem; }._icon-codeigniter:before { background-position: -10rem -1rem; }._icon-coffeescript:before { background-position: -11rem -1rem; @extend %darkIconFix !optional; }._icon-composer:before { background-position: -12rem -1rem; }._icon-cordova:before { background-position: -13rem -1rem; }._icon-crystal:before { background-position: -14rem -1rem; @extend %darkIconFix !optional; }._icon-css:before { background-position: -0rem -2rem; }._icon-cypress:before { background-position: -1rem -2rem; }._icon-d:before { background-position: -2rem -2rem; }._icon-d3:before { background-position: -3rem -2rem; }._icon-dart:before { background-position: -4rem -2rem; }._icon-date_fns:before { background-position: -5rem -2rem; @extend %darkIconFix !optional; }._icon-deno:before { background-position: -6rem -2rem; }._icon-django:before { background-position: -7rem -2rem; }._icon-django_rest_framework:before { background-position: -8rem -2rem; @extend %darkIconFix !optional; }._icon-docker:before { background-position: -9rem -2rem; }._icon-dojo:before { background-position: -10rem -2rem; }._icon-drupal:before { background-position: -11rem -2rem; }._icon-eigen3:before { background-position: -12rem -2rem; @extend %darkIconFix !optional; }._icon-electron:before { background-position: -13rem -2rem; }._icon-elisp:before { background-position: -14rem -2rem; }._icon-elixir:before { background-position: -0rem -3rem; }._icon-ember:before { background-position: -1rem -3rem; }._icon-enzyme:before { background-position: -7rem -7rem; }._icon-erlang:before { background-position: -2rem -3rem; }._icon-esbuild:before { background-position: -3rem -3rem; }._icon-eslint:before { background-position: -4rem -3rem; }._icon-express:before { background-position: -5rem -3rem; }._icon-falcon:before { background-position: -6rem -3rem; }._icon-fastapi:before { background-position: -7rem -3rem; @extend %darkIconFix !optional; }._icon-fish:before { background-position: -8rem -3rem; }._icon-flask:before { background-position: -9rem -3rem; }._icon-flow:before { background-position: -10rem -3rem; }._icon-fluture:before { background-position: -11rem -3rem; }._icon-gcc:before { background-position: -12rem -3rem; }._icon-git:before { background-position: -13rem -3rem; }._icon-gnu_fortran:before { background-position: -14rem -3rem; }._icon-gnu_make:before { background-position: -0rem -4rem; @extend %darkIconFix !optional; }._icon-gnu_cobol:before { background-position: -1rem -4rem; @extend %darkIconFix !optional; }._icon-gnuplot:before { background-position: -2rem -4rem; }._icon-go:before { background-position: -3rem -4rem; }._icon-godot:before { background-position: -4rem -4rem; }._icon-graphite:before { background-position: -7rem -7rem; }._icon-groovy:before { background-position: -5rem -4rem; }._icon-grunt:before { background-position: -6rem -4rem; }._icon-gtk:before { background-position: -7rem -4rem; }._icon-hammerspoon:before { background-position: -8rem -4rem; }._icon-handlebars:before { background-position: -9rem -4rem; @extend %darkIconFix !optional; }._icon-hapi:before { background-position: -10rem -4rem; }._icon-haproxy:before { background-position: -11rem -4rem; }._icon-haskell:before { background-position: -12rem -4rem; @extend %darkIconFix !optional; }._icon-haxe:before { background-position: -13rem -4rem; }._icon-homebrew:before { background-position: -14rem -4rem; }._icon-html:before { background-position: -0rem -5rem; }._icon-http:before { background-position: -1rem -5rem; }._icon-i3:before { background-position: -2rem -5rem; }._icon-immutable:before { background-position: -3rem -5rem; @extend %darkIconFix !optional; }._icon-influxdata:before { background-position: -4rem -5rem; @extend %darkIconFix !optional; }._icon-jasmine:before { background-position: -5rem -5rem; }._icon-javascript:before { background-position: -6rem -5rem; }._icon-jekyll:before { background-position: -7rem -5rem; }._icon-jest:before { background-position: -8rem -5rem; }._icon-jinja:before { background-position: -9rem -5rem; @extend %darkIconFix !optional; }._icon-joi:before { background-position: -10rem -5rem; @extend %darkIconFix !optional; }._icon-jq:before { background-position: -11rem -5rem; @extend %darkIconFix !optional; }._icon-jquery:before { background-position: -12rem -5rem; }._icon-jquerymobile:before { background-position: -13rem -5rem; }._icon-jqueryui:before { background-position: -14rem -5rem; }._icon-jsdoc:before { background-position: -7rem -7rem; }._icon-julia:before { background-position: -0rem -6rem; @extend %darkIconFix !optional; }._icon-knockout:before { background-position: -1rem -6rem; }._icon-koa:before { background-position: -7rem -7rem; }._icon-kotlin:before { background-position: -2rem -6rem; }._icon-kubectl:before { background-position: -3rem -6rem; @extend %darkIconFix !optional; }._icon-kubernetes:before { background-position: -4rem -6rem; }._icon-laravel:before { background-position: -5rem -6rem; }._icon-latex:before { background-position: -6rem -6rem; @extend %darkIconFix !optional; }._icon-leaflet:before { background-position: -7rem -6rem; }._icon-less:before { background-position: -8rem -6rem; }._icon-liquid:before { background-position: -9rem -6rem; }._icon-lodash:before { background-position: -10rem -6rem; }._icon-lua:before { background-position: -11rem -6rem; @extend %darkIconFix !optional; }._icon-love:before { background-position: -12rem -6rem; }._icon-mariadb:before { background-position: -13rem -6rem; }._icon-marionette:before { background-position: -14rem -6rem; }._icon-markdown:before { background-position: -0rem -7rem; @extend %darkIconFix !optional; }._icon-matplotlib:before { background-position: -1rem -7rem; }._icon-meteor:before { background-position: -2rem -7rem; @extend %darkIconFix !optional; }._icon-mocha:before { background-position: -3rem -7rem; }._icon-modernizr:before { background-position: -4rem -7rem; }._icon-moment:before { background-position: -5rem -7rem; @extend %darkIconFix !optional; }._icon-moment_timezone:before { background-position: -6rem -7rem; }._icon-mongoose:before { background-position: -7rem -7rem; }._icon-nginx:before { background-position: -8rem -7rem; }._icon-nginx_lua_module:before { background-position: -7rem -7rem; }._icon-nim:before { background-position: -9rem -7rem; @extend %darkIconFix !optional; }._icon-nix:before { background-position: -10rem -7rem; }._icon-node:before { background-position: -11rem -7rem; }._icon-nokogiri:before { background-position: -12rem -7rem; @extend %darkIconFix !optional; }._icon-npm:before { background-position: -13rem -7rem; }._icon-numpy:before { background-position: -14rem -7rem; }._icon-nushell:before { background-position: -0rem -8rem; }._icon-ocaml:before { background-position: -1rem -8rem; }._icon-octave:before { background-position: -2rem -8rem; }._icon-openjdk:before { background-position: -3rem -8rem; }._icon-opentsdb:before { background-position: -4rem -8rem; }._icon-padrino:before { background-position: -5rem -8rem; }._icon-pandas:before { background-position: -6rem -8rem; @extend %darkIconFix !optional; }._icon-perl:before { background-position: -7rem -8rem; }._icon-phalcon:before { background-position: -8rem -8rem; }._icon-phaser:before { background-position: -9rem -8rem; }._icon-phoenix:before { background-position: -10rem -8rem; }._icon-php:before { background-position: -11rem -8rem; }._icon-phpunit:before { background-position: -12rem -8rem; }._icon-point_cloud_library:before { background-position: -13rem -8rem; }._icon-pony:before { background-position: -14rem -8rem; }._icon-postgresql:before { background-position: -0rem -9rem; }._icon-prettier:before { background-position: -1rem -9rem; @extend %darkIconFix !optional; }._icon-pug:before { background-position: -2rem -9rem; }._icon-puppeteer:before { background-position: -3rem -9rem; }._icon-pygame:before { background-position: -4rem -9rem; }._icon-python:before { background-position: -5rem -9rem; }._icon-pytorch:before { background-position: -6rem -9rem; }._icon-q:before { background-position: -7rem -9rem; }._icon-qt:before { background-position: -8rem -9rem; }._icon-qunit:before { background-position: -9rem -9rem; }._icon-r:before { background-position: -10rem -9rem; }._icon-ramda:before { background-position: -11rem -9rem; @extend %darkIconFix !optional; }._icon-react:before { background-position: -12rem -9rem; @extend %darkIconFix !optional; }._icon-react_bootstrap:before { background-position: -13rem -9rem; }._icon-react_native:before { background-position: -14rem -9rem; }._icon-react_router:before { background-position: -0rem -10rem; @extend %darkIconFix !optional; }._icon-reactivex:before { background-position: -1rem -10rem; }._icon-redis:before { background-position: -2rem -10rem; }._icon-redux:before { background-position: -3rem -10rem; @extend %darkIconFix !optional; }._icon-relay:before { background-position: -4rem -10rem; }._icon-requests:before { background-position: -5rem -10rem; }._icon-requirejs:before { background-position: -6rem -10rem; }._icon-rethinkdb:before { background-position: -7rem -10rem; }._icon-ruby:before { background-position: -8rem -10rem; }._icon-minitest:before { background-position: -7rem -7rem; }._icon-rails:before { background-position: -9rem -10rem; }._icon-rust:before { background-position: -10rem -10rem; @extend %darkIconFix !optional; }._icon-rxjs:before { background-position: -11rem -10rem; }._icon-saltstack:before { background-position: -12rem -10rem; @extend %darkIconFix !optional; }._icon-sanctuary:before { background-position: -13rem -10rem; }._icon-sanctuary_def:before { background-position: -14rem -10rem; }._icon-sanctuary_type_classes:before { background-position: -0rem -11rem; }._icon-sass:before { background-position: -1rem -11rem; }._icon-scala:before { background-position: -2rem -11rem; }._icon-scikit_image:before { background-position: -3rem -11rem; }._icon-scikit_learn:before { background-position: -4rem -11rem; }._icon-sequelize:before { background-position: -5rem -11rem; }._icon-sinon:before { background-position: -6rem -11rem; }._icon-socketio:before { background-position: -7rem -11rem; }._icon-spring_boot:before { background-position: -8rem -11rem; }._icon-sqlite:before { background-position: -9rem -11rem; }._icon-statsmodels:before { background-position: -10rem -11rem; }._icon-browser_support_tables:before { background-position: -7rem -7rem; }._icon-svelte:before { background-position: -11rem -11rem; }._icon-svg:before { background-position: -12rem -11rem; }._icon-symfony:before { background-position: -13rem -11rem; }._icon-tailwindcss:before { background-position: -14rem -11rem; }._icon-tcl_tk:before { background-position: -7rem -7rem; }._icon-tensorflow:before { background-position: -0rem -12rem; }._icon-tensorflow_cpp:before { background-position: -1rem -12rem; }._icon-terraform:before { background-position: -2rem -12rem; @extend %darkIconFix !optional; }._icon-trio:before { background-position: -3rem -12rem; }._icon-twig:before { background-position: -4rem -12rem; }._icon-typescript:before { background-position: -5rem -12rem; }._icon-underscore:before { background-position: -6rem -12rem; @extend %darkIconFix !optional; }._icon-vagrant:before { background-position: -7rem -12rem; }._icon-varnish:before { background-position: -8rem -12rem; }._icon-vite:before { background-position: -9rem -12rem; }._icon-vitest:before { background-position: -10rem -12rem; }._icon-vue:before { background-position: -11rem -12rem; }._icon-vue_router:before { background-position: -12rem -12rem; }._icon-vueuse:before { background-position: -13rem -12rem; }._icon-vuex:before { background-position: -14rem -12rem; }._icon-vulkan:before { background-position: -0rem -13rem; @extend %darkIconFix !optional; }._icon-wagtail:before { background-position: -1rem -13rem; @extend %darkIconFix !optional; }._icon-dom:before { background-position: -2rem -13rem; }._icon-web_extensions:before { background-position: -7rem -7rem; }._icon-webpack:before { background-position: -3rem -13rem; }._icon-werkzeug:before { background-position: -4rem -13rem; }._icon-wordpress:before { background-position: -5rem -13rem; @extend %darkIconFix !optional; }._icon-xslt_xpath:before { background-position: -7rem -7rem; }._icon-yarn:before { background-position: -6rem -13rem; }._icon-yii:before { background-position: -7rem -13rem; }._icon-zig:before { background-position: -8rem -13rem; }
